// 函数组件
import React, { useState, useEffect, useContext, useRef } from 'react';
import "./css/Search.less"
import { Input, Select, DatePicker, Table, Switch, Modal, message, ConfigProvider } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import { ExclamationCircleFilled } from '@ant-design/icons';
import SearchDialog from './child/SearchDialog';
import zh_CN from 'antd/es/locale/zh_CN';

// 引入请求api等
import { baseUrl, delSearch, showSearch } from "../../../api/operationApi"


interface DataType {
    searchId: number,
    searchName: string,
    searchState: number,
    searchLocation: number,
}

function Search() {
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'searchId',
            align: 'center',
            width: '15%'
        },
        {
            title: '关键词名称',
            dataIndex: 'searchName',
            align: 'center',
        },
        {
            title: '位置',
            dataIndex: 'searchLocation',
            align: 'center',
        },
        {
            title: '是否上架',
            dataIndex: 'searchState',
            align: 'center',
            render: (value, record, index) => {
                return (
                    <Switch checked={value} />
                )
            }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            render: (value, record) => (
                <div>
                    <button className='edit' onClick={() => clickMod(record)}>编辑</button>
                    <button className='del'onClick={() => clickDel(record)}>删除</button>
                </div>
            ),
        },
    ];

    const [currentPage, setCurrentPage] = useState<number>(1) // 当前页
    const [pageSize, setPageSize] = useState<number>(10)  // 一页条数
    const [count, setCount] = useState<number>() // 总数
    const [upTotal,setUpTotal] = useState<number>(0)

    // 表格数据
    const [data, setData] = useState<DataType[]>([])

    // 1、表格渲染数据
    useEffect(() => {
        getData(currentPage, pageSize)
    }, [currentPage, pageSize])

    // 1-1 删除当前页最后一项，页码改变
    useEffect(() => {
        if (currentPage > 1 && data.length === 0) {
            setCurrentPage(currentPage - 1)
        }
    }, [data])

    // 1-2 获取数据
    async function getData(currentPage: number, pageSize: number) {
        let res = await showSearch(
            {
                "currentPage": currentPage,
                "pageSize": pageSize
            }
        )
        setCount(res.data.total)
        setData(res.data.searches)
        setUpTotal(res.data.upTotal)
    }

    // 1-3 改变页码
    const getPageContent = (currentPage: number, pageSize: number) => {
        setCurrentPage(currentPage)
        setPageSize(pageSize)
    }


    // 2、删除
    const { confirm } = Modal;
    const clickDel = (item: DataType) => {
        confirm({
            title: '确定删除该关键词吗?',
            icon: <ExclamationCircleFilled />,
            content: '删除之后就没了哦~',
            async onOk() {
                await delSearch({
                    id: item.searchId
                })
                getData(currentPage, pageSize)
                message.success('删除成功')
            },
            onCancel() {
                message.warning('取消操作')
            },
        });
    }

  

    // 3、点击添加，弹出弹框
    const [type, setType] = useState<string>('')
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false); // 对话框是否打开
    const clickAdd = () => {
        setType("add")
        setIsModalOpen(true)
    }


    // 4、点击修改，传递值
    const [modStuInfo, setModStuInfo] = useState<DataType>()
    const clickMod = (item: DataType): void => {
        setType('mod')
        setModStuInfo(item)
        // 弹框显示
        setIsModalOpen(true)
    }

    // 点击取消
    const close = () => {
        setIsModalOpen(false)
    }

    return (
        <div className='Search'>
            {/* 头部 */}
            <div className='page-top'>
                {/*左边标题  */}
                <div className='page-title'>
                    <p>搜索管理</p>
                </div>
            </div>

            {/* 内容区 */}
            <div className='page-context'>
                {/* 数据表格部分 */}
                <div className='data-list'>
                    <div className='list-title'>
                        <p>数据列表</p>
                        <div className='list-operation'>
                            <p>最多同时上架6个关键词</p>
                            <div>
                                <button className='add' onClick={clickAdd}>添加</button>
                            </div>
                        </div>
                    </div>

                    {/* 表格部分 */}
                    <ConfigProvider locale={zh_CN}>
                        <Table
                            columns={columns}
                            dataSource={data}
                            scroll={{ y: 444 }}
                            rowKey={item => item.searchId}
                            pagination={{
                                position: ['bottomCenter'],
                                total: count,
                                pageSize: pageSize,
                                onChange: getPageContent,
                                defaultPageSize: 10,
                                pageSizeOptions: [3, 5, 10, 15],
                                showQuickJumper: true,
                                showSizeChanger: true,
                            }}
                        />
                    </ConfigProvider>


                </div>

            </div>

            {/* 弹框 */}
            <SearchDialog data={data} upTotal={upTotal} currentPage={currentPage} pageSize={pageSize} getData={getData}  isModalOpen={isModalOpen} modStuInfo={modStuInfo} type={type} close={close}></SearchDialog>

        </div>
    )
}

export default Search